<!--
 * @Descripttion: unTitle
 * @Author: yizheng.yuan
 * @Date: 2021-12-22 14:57:58
 * @LastEditors: yizheng.yuan
 * @LastEditTime: 2021-12-22 15:02:02
-->
<template>
    <section class="toast-container">
        <div class="toast" 
            v-bind:class="[visible ? 'fade-in':'fade-out']"
            v-bind:style="{color: (color ? color : ''),background: (background ? background : '')}"
        >
            <span>{{message}}</span>
        </div>
    </section>
</template>
<script>
    export default{
        data(){
            return {
                visible: true,
                message:'',
                color: 'white',
                background: 'red'
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss">
    @keyframes fade-in{
        0%{
        opacity:0;
        transform:scale(0.7);
        }
        100%{
            opacity:1;
            transform:scale(1);
        }
    }

    @keyframes fade-out{
        0%{
            opacity:1;
            transform:scale(1);
        }
        100%{
            opacity:0;
            transform:scale(0.7);
        }
    }

    .toast-container {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 2000;
        display: flex;
        justify-content: center;
        align-items: center;
    .toast {
        padding:10px 15px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.62);
        border-radius: 10px;
        color: #fff;
    }
    .fade-in{
        animation-name: fade-in;
        animation-duration: 0.3s;
        animation-fill-mode: both;
    }
    .fade-out{
        animation-name: fade-out;
        animation-duration: 0.3s;
        animation-fill-mode: both;
    }
    }
 
</style>
